---
import { markActiveNavigation, MOBILE_NAVIGATION, SOCIAL_LINKS } from "../navigation";
import { createChangeLangLinks, getPathParamsFromId, getTextLocalized } from "../languages";

import NestedLinks from "./NestedLinks.astro";

import IconExternal from "@icons/External.astro";

const { slug, lang } = getPathParamsFromId(Astro.url.pathname);
const languageLinks = createChangeLangLinks({ slug });
const activeNavigation = markActiveNavigation(`/${slug.replace(/\/$/, "")}`, MOBILE_NAVIGATION);
---

<div class="navigation">
  <nav>
    <NestedLinks items={activeNavigation} firstLevel />
  </nav>
  <footer>
    <div class="socials">
      {
        SOCIAL_LINKS.map((link) => {
          const Icon = link.icon ?? IconExternal;
          return (
            <a class="social" href={link.link} class="link only-medium" target="_blank">
              <Icon size={24} />
            </a>
          );
        })
      }
    </div>
    <select class="language-switch" id="language-switch">
      {
        languageLinks.map((link) => {
          return (
            <option selected={link.link === Astro.url.pathname} value={link.link}>
              {getTextLocalized(link, lang)}
            </option>
          );
        })
      }
    </select>
  </footer>
</div>

<style>
  :global(.mobile-menu-opened) .navigation {
    display: flex;
  }

  .navigation {
    @apply fixed hidden w-screen flex-col overflow-hidden overflow-y-auto;

    top: var(--theme-navbar-height);
    bottom: 0;
    z-index: 1000;

    will-change: transform, opacity;
    contain: layout style;
    backface-visibility: hidden;
    background-color: var(--theme-bg);
  }

  nav {
    @apply flex grow flex-col overflow-y-auto py-4;
    font-family: "Lexend Deca", sans-serif;

    overscroll-behavior: contain;
    padding-left: max(env(safe-area-inset-left), 1rem);
    padding-right: max(env(safe-area-inset-right), 1rem);
  }

  footer {
    @apply z-10 flex justify-between py-2;

    padding-left: max(env(safe-area-inset-left), 1rem);
    padding-right: max(env(safe-area-inset-right), 1rem);

    box-shadow: 0 -4px 6px -4px rgb(0 0 0 / 0.1);
    background-color: var(--theme-bg);
  }

  .socials {
    @apply flex gap-2;
  }

  .social {
    @apply cursor-pointer rounded px-3 py-3 transition-colors;
    color: var(--theme-text);
  }

  .social:hover {
    background-color: var(--theme-divider);
  }

  .language-switch {
    @apply box-content flex items-center justify-center rounded p-2 text-base;
  }
</style>

<script>
  document.querySelectorAll("#language-switch").forEach((switcher) => {
    const select = switcher as HTMLSelectElement;

    select.addEventListener("change", function () {
      document.location.pathname = select.value;
    });
  });
</script>
